<template>
  <div class="container" v-loading="loading">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
      <el-divider content-position="left">
        <span class="title-left-color">店铺信息</span>
        <el-tooltip placement="top" content="营业执照名称，法人名称，营业执照图片，店铺签署合同会提示 （签约失败，请联系业务）的错误">
          <el-icon class="icon-wzg-config"><InfoFilled /></el-icon>
        </el-tooltip>
      </el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="店铺名称：" prop="store_name">
            <el-input v-model.trim="form.store_name" placeholder="店铺名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人：" prop="user_name">
            <el-input v-model.trim="form.user_name" placeholder="联系人"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="手机号：" prop="store_phone">
            <el-input v-model.trim="form.store_phone" disabled placeholder="手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配件业务员：" prop="staff_uid">
            <el-select v-model.trim="form.staff_uid" placeholder="请选择配件业务员" clearable filterable>
              <el-option v-for="item in storageList" :label="item.username" :value="item.user_id" :key="item.user_id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="租机业务员：" prop="rent_staff_uid">
            <el-select v-model.trim="form.rent_staff_uid" placeholder="请选择租机业务员" clearable filterable>
              <el-option v-for="item in rentSalesmanList" :label="item.username" :value="item.user_id" :key="item.user_id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="省：" prop="province_id">
            <el-select v-model.trim="form.province_id" placeholder="请选择省份" clearable @change="handleChangeProvince">
              <el-option v-for="item in provinceList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="市：" prop="city_id">
            <el-select v-model.trim="form.city_id" placeholder="请选择城市" clearable @change="handleChangeCity">
              <el-option v-for="item in cityList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区：" prop="district">
            <el-select v-model.trim="form.district" placeholder="请选择地区" clearable>
              <el-option v-for="item in districtList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="营业执照名称：" prop="company_name">
            <el-input v-model.trim="form.company_name" placeholder="营业执照名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人名称：" prop="legal_person">
            <el-input v-model.trim="form.legal_person" placeholder="法人名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="收款账号姓名：" prop="alipay_account_name">
            <el-input v-model.trim="form.alipay_account_name" placeholder="收款账号姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款支付宝账号：" prop="alipay_account">
            <el-input v-model.trim="form.alipay_account" placeholder="收款支付宝账号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="统一社会信用代码：" prop="business_licence_number">
            <el-input v-model.trim="form.business_licence_number" placeholder="统一社会信用代码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="店铺是否开启：" prop="store_state">
            <el-select v-model.trim="form.store_state" placeholder="店铺是否开启" clearable>
              <el-option v-for="item in whetherStatue" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="11">
          <el-form-item label="平台类型：" prop="platform">
            <el-select v-model.trim="form.platform" placeholder="请选择平台类型" clearable multiple>
              <el-option v-for="item in platFormStatus" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-tooltip placement="top" content="平台类型：用在新增 抖音，快手，淘宝，小红书，美团等小店的租机订单时的选择，其他时候不用保存这个信息。（主要是三方合同相关）">
            <el-icon class="icon-wzg-config"><InfoFilled /></el-icon>
          </el-tooltip>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否自营店铺：" prop="self_employed">
            <el-select v-model.trim="form.self_employed" placeholder="是否自营店铺" clearable>
              <el-option v-for="item in whetherStatue" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="是否支持到店自提：" prop="support_by_store">
            <el-select v-model.trim="form.support_by_store" placeholder="是否支持到店自提" clearable>
              <el-option v-for="item in whetherStatue" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="售卖手机：" prop="support_all_mobile">
            <el-select v-model.trim="form.support_all_mobile" placeholder="售卖手机" clearable>
              <el-option v-for="item in supportAllMobileList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="11">
          <el-form-item label="商家奖励：" prop="reward_rate">
            <el-input v-model.trim="form.reward_rate" placeholder="商家奖励"> <template v-slot:append>%</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-tooltip placement="top" content="给优质店铺提供更多的订单提成">
            <el-icon class="icon-wzg-config"><InfoFilled /></el-icon>
          </el-tooltip>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否支持商品管理：" prop="is_product_management_enabled">
            <el-select v-model.trim="form.is_product_management_enabled" placeholder="是否支持商品管理" clearable>
              <el-option v-for="item in whetherStatue" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="是否支持手机租赁：" prop="is_support_rent_mobile">
            <el-select v-model.trim="form.is_support_rent_mobile" placeholder="是否支持手机租赁" clearable>
              <el-option v-for="item in whetherStatue" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="详细地址：" prop="store_address">
            <el-input v-model.trim="form.store_address" type="textarea" :rows="2" placeholder="详细地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注：" prop="store_note">
            <el-input v-model.trim="form.store_note" type="textarea" :rows="2" placeholder="备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="营业执照：" prop="business_licence_cert">
            <UploadImageInfo :limit="2000" :imageWidth="170" :imageHeight="170" suggestInfo="" imageKey="business_licence_cert" v-model:disabledbtn="disabledbtn" v-model:loading="loading" v-model:form="form" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门头照：" prop="door_phone">
            <UploadImageInfo :limit="2000" :imageWidth="170" :imageHeight="170" suggestInfo="" imageKey="door_phone" v-model:disabledbtn="disabledbtn" v-model:loading="loading" v-model:form="form" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><span class="title-left-color">门店情况</span></el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="人员规模：" prop="personnel_size">
            <el-input v-model.trim="form.store_info.personnel_size" placeholder="请填写人员规模"><template #append>人</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板年龄：" prop="boss_age">
            <el-input v-model.trim="form.store_info.boss_age" placeholder="请填写老板年龄"><template #append>岁</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="正常购买数量：" prop="purchase_quantity">
            <el-input v-model.trim="form.store_info.purchase_quantity" placeholder="请填写正常购买数量"><template #append>台</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="店铺等级：" prop="shop_level">
            <el-select v-model.trim="form.store_info.shop_level" placeholder="请选择店铺等级" clearable>
              <el-option v-for="item in shopLevelList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主营业务：" prop="main_business">
            <el-select v-model.trim="form.store_info.main_business" multiple placeholder="请选择主营业务" clearable>
              <el-option v-for="item in mainBusinessList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线上推广：" prop="online_promotion">
            <el-select v-model.trim="form.store_info.online_promotion" multiple placeholder="请选择线上推广" clearable>
              <el-option v-for="item in onlinePromotionList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入驻形式：" prop="form_of_entry">
            <el-select v-model.trim="form.store_info.form_of_entry" placeholder="请选择入驻形式" clearable>
              <el-option v-for="item in formOfEntryList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入驻兴趣点：" prop="settle_in_interest_points">
            <el-select v-model.trim="form.store_info.settle_in_interest_points" multiple placeholder="请选择入驻兴趣点" clearable>
              <el-option v-for="item in settleInInterestPointsList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营时间：">
            <el-input v-model.trim="form.store_info.operating_hours" placeholder="请填写经营时间"><template #append>年</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门店手机数量：">
            <el-input v-model.trim="form.store_info.store_mobile_number" placeholder="请填写门店手机数量"><template #append>台</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分期销量：">
            <el-input v-model.trim="form.store_info.installment_sales_volume" placeholder="请填写分期销量"><template #append>台</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="获客渠道：">
            <el-select v-model.trim="form.store_info.customer_acquisition_channel" multiple placeholder="请选择获客渠道" clearable>
              <el-option v-for="item in customerAcquisitionChannelList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料：">
            <el-select v-model.trim="form.store_info.materials" multiple placeholder="请选择物料" clearable>
              <el-option v-for="item in materialsList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户动作：">
            <el-select v-model.trim="form.store_info.customer_action" multiple placeholder="请选择客户动作" clearable>
              <el-option v-for="item in customerActionList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="回访图片：" prop="store_info.visit_images">
            <UploadImageListInfo ref="uploadImageListRef" group="visit_images" v-model:disabledbtn="disabledbtn" v-model:loading="loading" v-model:imageList="form.store_info.visit_images" :imageNum="imageNum" suggestInfo="建议：大小1M以下，最多上传4张" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="left"><span class="title-left-color">营业员信息</span></el-divider>
    <el-table :data="salesList" border class="table" ref="multipleTable" :reserve-selection="true">
      <el-table-column type="index" align="center"> </el-table-column>
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="username" label="营业员姓名" align="center"> </el-table-column>
      <el-table-column prop="mobile" label="手机号" align="center"> </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button type="text" icon="el-icon-link" class="red" @click="handleDeleteSalesperson(scope.row)">解绑（删除营业员）</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer-center">
      <el-button :disabled="disabledbtn" @click="cancelSubmit">取 消</el-button>
      <el-button type="primary" :disabled="disabledbtn" v-if="!isDisabledbtn" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import UploadImageInfo from "@/components/common/UploadImageInfo.vue";
import UploadImageListInfo from "@/components/common/UploadImageListInfo.vue";
import type { postOrPutType } from "@/constants";
import type { HasId, ViewMode } from "@/types/common";
import { useState } from "@/hooks/useState.ts";
import type { IDictData } from "@/types/dict";
import type { IRentStaff } from "@/types/staff/rentStaff";
import type { IStaff } from "@/types/staff/staff";
import { splitAndFilter } from "@/utils/utils";
import { commonStoreInfo, getStoreByIdInfo } from "@/utils/api/store";
import type { ISalesperson, IStoreInfoDTO, IStoreInfoVO } from "@/types/storeManager/store";
import type { IRegion, ISearchRegion } from "@/types/redPacketMallManage/region";
import { getRegionInfo } from "@/utils/api/region";
const { disabledbtn, loading, toggleState } = useState();
interface Props {
  id: number;
  storageList: Array<IStaff>;
  rentSalesmanList: Array<IRentStaff>;
  whetherStatue: Array<IDictData>;
  platFormStatus: Array<IDictData>;
  supportAllMobileList: Array<IDictData>;
  shopLevelList: Array<IDictData>;
  onlinePromotionList: Array<IDictData>;
  mainBusinessList: Array<IDictData>;
  formOfEntryList: Array<IDictData>;
  settleInInterestPointsList: Array<IDictData>;
  customerAcquisitionChannelList: Array<IDictData>;
  materialsList: Array<IDictData>;
  customerActionList: Array<IDictData>;
  provinceList: Array<IRegion>;
}
const { id, storageList, rentSalesmanList, whetherStatue, platFormStatus, supportAllMobileList, shopLevelList, onlinePromotionList, mainBusinessList, settleInInterestPointsList, customerAcquisitionChannelList, materialsList, customerActionList, provinceList } =
  defineProps<Props>();
const formStatus = defineModel<ViewMode>("formStatus", { required: true });
/* 市 */
const cityList = ref<Array<IRegion>>([]);
/* 区 */
const districtList = ref<Array<IRegion>>([]);

const emit = defineEmits<{
  handleInitData: [];
  handleSuccess: [];
}>();
const isDisabledbtn = ref(false);
const checkAll = ref(false);
const formRef = useTemplateRef("formRef");
const methodType = ref<postOrPutType>("PUT");
const imageNum = ref<number>(0);
const uploadImageListRef = useTemplateRef("uploadImageListRef");

const form = reactive<IStoreInfoDTO>({
  id: 0,
  staff_uid: 0,
  rent_staff_uid: 0,
  store_name: "",
  user_name: "",
  store_phone: "",
  province_id: 0,
  city_id: 0,
  district: 0,
  store_address: "",
  company_name: "",
  legal_person: "",
  alipay_account: "",
  alipay_account_name: "",
  business_licence_number: "",
  store_state: "",
  business_licence_cert: "",
  door_phone: "",
  salesperson: [],
  deposit: "",
  settled_status: "",
  store_note: "",
  self_employed: "",
  support_by_store: "",
  is_support_rent_mobile: "",
  is_product_management_enabled: "",
  support_all_mobile: "",
  update_time: 0,
  reward_rate: 0,
  platform: [],
  lng: 0,
  lat: 0,
  store_info: {
    id: 0,
    form_of_entry: "",
    settle_in_interest_points: [],
    personnel_size: "",
    operating_hours: "",
    store_mobile_number: "",
    boss_age: "",
    purchase_quantity: "",
    installment_sales_volume: "",
    customer_acquisition_channel: [],
    shop_level: "",
    materials: [],
    main_business: [],
    customer_action: [],
    online_promotion: [],
    visit_images: [],
    update_time: ""
  }
});
const salesList = ref<ISalesperson[]>([]);
const rules = reactive({
  staff_uid: [{ required: true, message: "请选择配件业务员", trigger: "blur" }],
  rent_staff_uid: [{ required: true, message: "请选择租机业务员", trigger: "blur" }],
  store_name: [{ required: true, message: "请填写店铺名称", trigger: "blur" }],
  user_name: [{ required: true, message: "请填写联系人", trigger: "blur" }],
  store_phone: [{ required: true, message: "请填写手机号", trigger: "blur" }],
  province_id: [{ required: true, message: "请选择省份", trigger: "blur" }],
  city_id: [{ required: true, message: "请选择城市", trigger: "blur" }],
  district: [{ required: true, message: "请选择地区", trigger: "blur" }],
  store_address: [{ required: true, message: "请填写详细地址", trigger: "blur" }],
  store_state: [{ required: true, message: "请选择店铺状态", trigger: "blur" }],
  self_employed: [{ required: true, message: "请选择是否自营店铺", trigger: "blur" }],
  support_by_store: [{ required: true, message: "请选择是否支持到店自提", trigger: "blur" }],
  is_support_rent_mobile: [{ required: true, message: "请选择是否支持手机租赁", trigger: "blur" }],
  is_product_management_enabled: [{ required: true, message: "请选择是否支持商品管理", trigger: "blur" }],
  support_all_mobile: [{ required: true, message: "请选择售卖手机", trigger: "blur" }],
  business_licence_cert: [{ required: true, message: "请上传营业执照", trigger: "blur" }],
  door_phone: [{ required: true, message: "请上传门头照", trigger: "blur" }]
});

/* formStatus处理器 */
const statusHandlers: Record<ViewMode, () => void> = {
  view: () => {
    isDisabledbtn.value = true;
  },
  edit: () => {
    methodType.value = "PUT";
  },
  add: () => {
    methodType.value = "POST";
  },
  none: () => {
    /* 初始化数据 */
    handleInitData();
  }
};
/* 监听formStatus,新增，编辑，查看的时候都可以打开模态框，又是有不同的操作和效果，需要单独判断，none为模态框关闭的情况，需要初始化数据 */
watch(formStatus, newValue => {
  const handler = statusHandlers[newValue];
  handler?.();
});
/*  */
watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
      handleInitData();
    } else {
      form.id = newValue;
      handleGetDataById(id);
    }
  }
);

/* 获取详情信息 */
function handleGetDataById(id: number) {
  toggleState(true);
  getStoreByIdInfo<IStoreInfoVO, HasId>({ id })
    .then(res => {
      form.id = res.result.id;

      form.store_name = res.result.store_name;
      form.user_name = res.result.user_name;
      form.store_phone = res.result.store_phone;
      form.store_address = res.result.store_address;
      form.company_name = res.result.company_name;
      form.legal_person = res.result.legal_person;
      form.alipay_account = res.result.alipay_account;
      form.alipay_account_name = res.result.alipay_account_name;
      form.business_licence_number = res.result.business_licence_number;
      form.store_state = res.result.store_state + "";
      form.province_id = res.result.province_id;
      form.city_id = res.result.city_id;
      form.district = res.result.district;
      form.business_licence_cert = res.result.business_licence_cert;
      form.door_phone = res.result.door_phone;
      form.staff_uid = res.result.staff.user_id;
      form.rent_staff_uid = res.result.rent_staff.user_id;
      form.deposit = res.result.deposit;
      form.settled_status = res.result.settled_status;
      form.store_note = res.result.store_note;
      form.self_employed = res.result.self_employed + "";
      form.support_by_store = res.result.support_by_store + "";
      form.is_support_rent_mobile = res.result.is_support_rent_mobile + "";
      form.is_product_management_enabled = res.result.is_product_management_enabled + "";
      form.support_all_mobile = res.result.support_all_mobile + "";
      form.update_time = res.result.update_time;
      form.platform = res.result.platform;
      form.reward_rate = res.result.reward_rate;
      /* 初始化 市 区 */
      handleGetRegionInfo(+form.province_id, cityList);
      handleGetRegionInfo(+form.city_id, districtList);
      salesList.value = res.result.salesperson;

      /* 获取经纬度 */
      form.lat = res.result.lat || 29.306342;
      form.lng = res.result.lng || 120.07545;

      if (res.result.store_info !== null) {
        form.store_info.id = res.result.store_info.id;
        form.store_info.form_of_entry = res.result.store_info.form_of_entry;
        form.store_info.settle_in_interest_points = splitAndFilter(res.result.store_info.settle_in_interest_points);
        form.store_info.personnel_size = res.result.store_info.personnel_size;
        form.store_info.operating_hours = res.result.store_info.operating_hours;
        form.store_info.store_mobile_number = res.result.store_info.store_mobile_number;
        form.store_info.boss_age = res.result.store_info.boss_age;
        form.store_info.purchase_quantity = res.result.store_info.purchase_quantity;
        form.store_info.installment_sales_volume = res.result.store_info.installment_sales_volume;
        form.store_info.customer_acquisition_channel = splitAndFilter(res.result.store_info.customer_acquisition_channel);

        form.store_info.shop_level = res.result.store_info.shop_level;
        form.store_info.materials = splitAndFilter(res.result.store_info.materials);
        form.store_info.main_business = splitAndFilter(res.result.store_info.main_business);
        form.store_info.customer_action = splitAndFilter(res.result.store_info.customer_action);
        form.store_info.online_promotion = splitAndFilter(res.result.store_info.online_promotion);
        form.store_info.visit_images = splitAndFilter(res.result.store_info.visit_images);
      }
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 初始化数据 */
function handleInitData() {
  methodType.value = "POST";
  isDisabledbtn.value = false;

  checkAll.value = false;

  form.id = 0;

  form.store_info.id = 0;
  form.store_info.form_of_entry = "";
  form.store_info.settle_in_interest_points = [];
  form.store_info.personnel_size = "";
  form.store_info.operating_hours = "";
  form.store_info.store_mobile_number = "";
  form.store_info.boss_age = "";
  form.store_info.purchase_quantity = "";
  form.store_info.installment_sales_volume = "";
  form.store_info.customer_acquisition_channel = [];
  form.store_info.shop_level = "";
  form.store_info.materials = [];
  form.store_info.main_business = [];
  form.store_info.customer_action = [];
  form.store_info.online_promotion = [];
  salesList.value = [];
  cityList.value = [];
  districtList.value = [];
  uploadImageListRef.value?.handleClearImage();
  formRef.value?.resetFields();
  formRef.value?.clearValidate();
}

/* 保存校验数据 */
function handleValidate() {
  return true;
}

/* 保存或编辑 */
function submitForm() {
  if (!formRef.value) return;
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.warning("请填写必填字段");
      return;
    }
    if (!handleValidate()) return;
    submitFormInfo();
  });
}

/* 保存或编辑信息 */
function submitFormInfo() {
  /* 防止多次提交 */
  toggleState(true);
  commonStoreInfo(form, methodType.value)
    .then(res => {
      ElMessage.success(res.msg);
      cancelSubmit();
      emit("handleSuccess");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 保存或编辑 取消提交 */
function cancelSubmit() {
  // clearData();
  // activeName = "one";
  emit("handleInitData");
}

/* 删除营业员信息 */
function handleDeleteSalesperson(row: ISalesperson) {
  let j = salesList.value.findIndex(item => item.user_id === row.user_id);
  if (j !== -1) {
    salesList.value.splice(j, 1);
    form.salesperson.push(row.user_id);
  }
}

/* 选择省 */
function handleChangeProvince() {
  cityList.value = [];
  districtList.value = [];
  form.city_id = "";
  form.district = "";
  handleGetRegionInfo(+form.province_id, cityList);
}
/* 选择市 */
function handleChangeCity() {
  districtList.value = [];
  form.district = "";
  handleGetRegionInfo(+form.city_id, districtList);
}
/* 获取省市县信息 */
function handleGetRegionInfo(parent_id: number, list: Ref<IRegion[]>) {
  getRegionInfo<IRegion, ISearchRegion>({ parent_id })
    .then(res => {
      list.value = ([] as IRegion[]).concat(res.result);
    })
    .catch(() => {});
}
</script>

<style lang="scss" scoped>
/* 修改select的盒模型 */
.el-select {
  display: block;
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}
</style>
